<template>
    <div class="productEdit">
        <el-dialog
            title="修改产品"
            :visible.sync="dialogVisible"
            width="50%"
            :close-on-press-escape="false"
            :close-on-click-modal="false"
            :modal-append-to-body="false"
            close="addCancel">
            <div class="dialog-body">
                <ul class="body-operation">
                    <li>
                        <span class="span1">logo:</span>
                        <span class="span2">
                        <el-upload
                            action="https://jsonplaceholder.typicode.com/posts/"
                            list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        </span>
                    </li>
                    <li>
                        <span class="span1">产品标识:</span>
                        <span class="span2">
                        <el-input v-model="editInfo.channelKey" placeholder="不超过10个英文字母"></el-input>
                        </span>
                    </li>
                    <li>
                        <span class="span1">产品名称:</span>
                        <span class="span2">
                        <el-input v-model="editInfo.productName" placeholder="不超过5个字符"></el-input>
                        </span>
                    </li>
                    <li>
                        <span class="span1">产品介绍:</span>
                        <span class="span2">
                        <el-input v-model="editInfo.productRemark" placeholder="不超过20个字符"></el-input>
                        </span>
                    </li>
                    <li>
                        <span class="span1">排序:</span>
                        <span class="span2">
                        <el-input v-model="editInfo.sort" placeholder="不超过1000的数字"></el-input>
                        </span>
                    </li>
                    <li>
                        <span class="span1">借款金额:</span>
                        <span class="span2">
                        <el-input class="inputWidth" v-model.trim="editInfo.startAmount"  placeholder="开始金额"></el-input>
                        -
                        <el-input class="inputWidth" v-model.trim="editInfo.endAmount"  placeholder="结束金额"></el-input>
                        </span>
                    </li>
                    <li>
                        <span class="span1">借款期限:</span>
                        <span class="span2">
                        <el-input class="inputWidth" v-model.trim="editInfo.startPeriod"  placeholder="开始期限"></el-input>
                        -
                        <el-input class="inputWidth" v-model.trim="editInfo.endPeriod"  placeholder="结束期限"></el-input>
                        <el-select v-model="editInfo.periodUnit" placeholder="请选择">
                            <el-option
                            v-for="item in UnitOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        </span>
                    </li>
                    <li>
                        <span class="span1">链接地址:</span>
                        <span class="span2">
                        <el-input v-model="editInfo.productUrl" placeholder="请输入链接地址"></el-input>
                        </span>
                    </li>
                    <li>
                        <span class="span1">状态:</span>
                        <span class="span2">
                        <el-select v-model="editInfo.status" placeholder="请选择">
                            <el-option
                            v-for="item in statusOptionsEdit"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                            </el-option>
                        </el-select>
                        </span>
                    </li>
                </ul>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editCancel">取 消</el-button>
                <el-button type="primary" @click="editSure">确 定</el-button>
            </span>
      </el-dialog>
    </div>
</template>
<script>
export default {
  props: ["editVisible", "message"],
  data() {
    return {
      editInfo: {},
      UnitOptions: [
        {
          value: "天",
          label: "天"
        },
        {
          value: "月",
          label: "月"
        }
      ],
      statusOptionsEdit: [
        {
          value: "1",
          label: "推广中"
        },
        {
          value: "0",
          label: "已下架"
        }
      ],
      dialogVisible: true
    };
  },
  methods: {
    editCancel() {
        let that = this;
        that.editInfo = that.message;
        that.$emit('productEdit',{
            editVisible : false
        })
    },
    editSure() {
        let that = this;
        if (!that.editInfo.imageUrl) {
            that.showMsg("请上传产品logo", "error");
            return;
        }
        if (!that.editInfo.channelKey) {
            that.showMsg("请输入产品标识", "error");
            return;
        }
        if (!that.editInfo.productName) {
            that.showMsg("请输入产品名称", "error");
            return;
        }
        if (!that.editInfo.productRemark) {
            that.showMsg("请输入产品介绍", "error");
            return;
        }
        if (!that.editInfo.sort) {
            that.showMsg("请输入排序", "error");
            return;
        }
        if (!that.editInfo.startAmount) {
            that.showMsg("请输入借贷开始金额", "error");
            return;
        }
        if (!that.editInfo.endAmount) {
            that.showMsg("请输入借贷结束金额", "error");
            return;
        }
        if (!that.editInfo.startPeriod) {
            that.showMsg("请输入接待开始期限", "error");
            return;
        }
        if (!that.editInfo.endPeriod) {
            that.showMsg("请输入借贷结束期限", "error");
            return;
        }
        if (!that.editInfo.periodUnit) {
            that.showMsg("请选择借贷期限单位", "error");
            return;
        }
        if (!that.editInfo.productUrl) {
            that.showMsg("请输入链接地址", "error");
            return;
        }
        if (!that.editInfo.status) {
            that.showMsg("请选择状态", "error");
            return;
        }
        that.ajaxJson({
            url: '/loan/saveProduct',
            data: that.editInfo,
            success: function(res){
                if(res.code == '0'){
                   that.$message({
                       type:'success',
                       message:'修改成功！'
                   }) 
                }else{
                    that.showMsg(res.message,'error')
                    return
                }
            }
        })
    }
  },
  created() {
    let that = this;
    if (that.message) {
      that.editInfo = that.message;
    }
    if(that.editVisible == true){
        that.dialogVisible = true;
    }
  }
};
</script>
<style lang="less">
.productEdit {
  .dialog-body {
    width: 100%;
    .body-message {
      width: 100%;
      overflow: hidden;
      li {
        width: 33.3%;
        float: left;
        line-height: 30px;
        .span1 {
          color: #999;
        }
        .span2 {
          color: #000;
        }
      }
    }
    .body-operation {
      margin-top: 20px;
      li {
        display: flex;
        line-height: 40px;
        margin-bottom: 10px;
        .span1 {
          width: 120px;
          flex: none;
          color: #999;
          text-align: right;
        }
        .span2 {
          flex: 1;
          margin-left: 20px;
          .el-input {
            width: 30% !important;
          }
          .inputWidth {
            width: 120px;
          }
          .el-select {
            .el-input {
              width: 100% !important;
            }
          }
          .el-input__inner {
            width: 100%;
            height: 36px;
            padding: 0 5px;
          }
          .el-checkbox__inner {
          }
        }
      }
    }
  }
}
</style>
